<template>
	<view>
		<scroll-view :style="{height:scrollHeight+'px'}" scroll-y="true" refresher-enabled="true" scroll-anchoring="true" :refresher-triggered="triggered" 
				:refresher-threshold="80"  @refresherpulling="onPulling"
				@refresherrefresh="onRefresh" @refresherrestore="onRestore" @refresherabort="onAbort">
				<view class="list-class" v-if="(list != null)">
					<uni-list  v-for="(item , index) in list.data.datas" :key="item.id">
						<uni-list-item :title="item.title" :note="'分享人:' + item.author + ' 时间:' + item.niceDate" :showExtraIcon="true" :extraIcon="{color: '#4cd964',size: '22',type: 'heart'}" @click='goLink(item)'></uni-list-item>
					</uni-list>
					<view>
						<uni-load-more :status="moreStatus" @clickLoadMore="clickLoadMore" ></uni-load-more>
					</view>
				</view>
				<view v-else>
					<uni-load-more status="noMore"></uni-load-more>
				</view>
		</scroll-view>
	</view>
</template>

<script>
	import uniList from '@/components/uni-list/uni-list.vue'
	import { requestUtils } from '@/common/util.js'
	import listData from '@/json/list.json' // 模拟数据接口
	export default {
		components:{
			uniList
		},
		data() {
			return {
				initFlage: true,
				triggered: false,
				_freshing:false,
				moreStatus: "more",
				list:null
				
			}
		},
		props:{
			scrollHeight: Number
		},
		created() {
			this.init() // 开启下拉
		},
		methods: {
			init(){ // 默认加载
				if(this.initFlage){
					this.initFlage = false;
					this.startRefresh(); 
					this.getList();
					this.closeRefresh();
				}
			},
			getList(){ // 调取数据接口  这里回显数据
				this.list = listData;
			},
			closeRefresh(){ // 关闭下拉
				setTimeout(() => {
					this.triggered = false;//触发onRestore，并关闭刷新图标  
					this._freshing = false;  
				}, 2000)
			},
			startRefresh(){ // 开启下拉
				setTimeout(() => {
					// 下拉开启
					if (this._freshing) return; 
					this._freshing = true;
					if (!this.triggered)//界面下拉触发，triggered可能不是true，要设为true
						this.triggered = true;  
				},10)
			},
			onPulling(e) {
				// 被下拉中
				//console.log("onpulling", e);
			},
			onRefresh() {
				// 下拉开启
				if (this._freshing) return; 
				this._freshing = true;
				if (!this.triggered)//界面下拉触发，triggered可能不是true，要设为true
					this.triggered = true; 
				
				this.getList();
				
				this.closeRefresh()
			},
			onRestore() {
				 // 复位
				 console.log("onRestore");  
			},
			onAbort() {
				// 中止
				console.log("onAbort");
			},
			clickLoadMore(){ // 点击加载更多
				this.moreStatus = "loading"
			},
			goLink(e){ // 跳转web页面
				uni.navigateTo({
				    url: '/components/m-refresh/m-web-view/m-web-view?src=' + encodeURIComponent(JSON.stringify(e.link)) + '&title=' + encodeURIComponent(JSON.stringify(e.title))
				});
			}
			
		}
	}
</script>

<style>
	movable-area {
		height: 300upx;
		width: 100%;
		overflow: hidden;
	}
	movable-view {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 150upx;
		width: 100%;
		color: #fff;
	}
	
</style>
